<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>三级联动-多选-删除</title>

    <script src="/www/wsdgservicemanage/Public/static/jqgrid/js/jquery-1.11.0.min.js"></script>

    <script type="text/javascript">
        var data = [{ "areaid": 1, "typeid": 1, "typeName": "精装修" },
            { "areaid": 1, "typeid": 2, "typeName": "立面" },
            { "areaid": 1, "typeid": 3, "typeName": "产品线" },
            { "areaid": 1, "typeid": 4, "typeName": "户型" },
            { "areaid": 2, "typeid": 1, "typeName": "楼层户型" },
            { "areaid": 2, "typeid": 2, "typeName": "立面" },
            { "areaid": 3, "typeid": 1, "typeName": "独立户型" },
            { "areaid": 3, "typeid": 2, "typeName": "核心筒" },
            { "areaid": 4, "typeid": 1, "typeName": "精装修" },
            { "areaid": 4, "typeid": 2, "typeName": "立面"}];

        var dataForTirdSelect = [{ "typeid": 1, "itemid": 1, "itemName": "成果1" },
            { "typeid": 1, "itemid": 2, "itemName": "成果2" },
            { "typeid": 1, "itemid": 3, "itemName": "成果3" },
            { "typeid": 1, "itemid": 4, "itemName": "成果4" },
            { "typeid": 2, "itemid": 1, "itemName": "成果5" },
            { "typeid": 2, "itemid": 2, "itemName": "成果6" },
            { "typeid": 3, "itemid": 1, "itemName": "成果7" },
            { "typeid": 3, "itemid": 2, "itemName": "成果8" },
            { "typeid": 4, "itemid": 1, "itemName": "成果9" },
            { "typeid": 4, "itemid": 2, "itemName": "成果10"}];

        $(document).ready(function() {
            var currentAreaId = 0;
            var currentTypeId = 0;
            var secondItemChooseContent = "";
            var thirdItemChooseContent = "";
            var countCurrentSelectItem = 0;

            $("#firstItemChoose").change(function() {
                currentAreaId = $(this).find("option:selected").attr("areaid");
                $(data).each(function() {
                    if (this.areaid == currentAreaId) {
                        secondItemChooseContent += '<option typeid="' + this.typeid + '">' + this.typeName + '</option>';
                    }
                });
                if (secondItemChooseContent != "") {
                    $("#secondItemChoose").html(secondItemChooseContent);
                    $("#secondItemChoose").removeAttr("disabled");
                    secondItemChooseContent = "";
                }
            });

            $("#secondItemChoose").change(function() {
                currentTypeId = $(this).find("option:selected").attr("typeid");
                $(dataForTirdSelect).each(function() {
                    if (this.typeid == currentTypeId) {
                        thirdItemChooseContent += '<option typeid="' + this.itemid + '">' + this.itemName + '</option>';
                    }
                });
                if (thirdItemChooseContent != "") {
                    $("#thirdItemChoose").html(thirdItemChooseContent);
                    $("#thirdItemChoose").removeAttr("disabled");
                    //                    $("#thirdItemChoose option").mouseover(function() {
                    //                        //获取详细说明 JSON 并显示在相应的 Div 上，预览之
                    //                        previewClickedItem($(this));
                    //                    });
                    thirdItemChooseContent = "";
                }
            });

            $("#thirdItemChoose").change(function() {
                if ($("#thirdItemChoose").find("option:selected").length > 0) {
                    previewClickedItem($(thirdItemChoose.options[thirdItemChoose.selectedIndex]));
                }
            });

            $("#selectedItems").change(function() {
                if ($("#selectedItems").find("option:selected").length > 0) {
                    previewClickedItem($(selectedItems.options[selectedItems.selectedIndex]));
                }
            });

            $("#delChosenItems").click(function() {
                $("#selectedItems").find("option:selected").each(function() {
                    $(this).remove();
                    //还要恢复相应选项
                });
            });

            function previewClickedItem(optionObj) {
                $("#previewItemPannel").text("预览" + optionObj.text());
            }

            $("#addItemBtn").click(function() {
                var selectedItems = $("#thirdItemChoose").find("option:selected");
                var selectedItemsList = $("#selectedItems");

                if (selectedItems.length > 0) {
                    if (countCurrentSelectItem == 0) {
                        selectedItemsList.html("");
                    }
                    selectedItems.each(function() {
                        selectedItemsList.append('<option itemid="' + $(this).attr("itemid") + '">' + $(this).html() + '</option>');
                        $(this).remove();
                        //还要记录下次也不要出现
                        countCurrentSelectItem += 1;
                    });
                    selectedItemsList.removeAttr("disabled");
                }
            });
        });
    </script>

</head>
<body>
<div class="ItemChosen">
    <select size="10" id="firstItemChoose">
        <option areaid="1">集团</option>
        <option areaid="2">北京区域</option>
        <option areaid="3">深圳区域</option>
        <option areaid="4">深圳一线</option>
    </select>
    >>
    <select size="10" id="secondItemChoose" disabled="disabled">
        <option>请先点击左侧选择区域</option>
    </select>
    >>
    <select size="10" id="thirdItemChoose" disabled="disabled" multiple="multiple">
        <option>请先点击左侧选择分类</option>
    </select>
    <input value=">>" type="button" id="addItemBtn" />
    <select size="10" id="selectedItems" disabled="disabled" multiple="multiple">
        <option>暂无</option>
    </select>
    <input value="删除" type="button" id="delChosenItems" />
</div>
<div id="previewItemPannel" style="height: 200px;">
</div>
<div class="controlBar">
    <input value="确定" type="button" id="chooseItemConfirmBtn" />
    <input value="关闭" type="button" id="cancelBtn" />
</div>
</body>
</html>